<template>
  <div>
    <div class="flex">
        <div class="shop">华硕商城</div>
        <van-search
      v-model="value"
      shape="round"
      background="transparent"
      placeholder="请输入搜索关键词"
      @focus="fun5"
      
    />
    <van-icon name="comment-o" size="35px"  @click="fun3"/>
    </div>

    <!-- swipe -->
    <van-swipe :autoplay="3000" :height="200"  >
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" @click="fun4(index)" />
  </van-swipe-item>
</van-swipe>

<van-grid :column-num="4" :icon-size="40" :border="false">
  <van-grid-item v-for="(v,index) in text" :key="index" :icon=myimg[index] :text="v" @click="onclick(index)"/>
</van-grid>
  </div>
</template>

<script>

import Vue from 'vue';
import { Search } from 'vant';

Vue.use(Search);


import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
import { Lazyload } from 'vant';

Vue.use(Lazyload);


import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
export default {
    data() {
    return {
        images: [
       
      ],
      value:'',
      text:[],
      myimg:[]
    };
  },
    methods: {
        fun5(){
            this.$router.push('/serch').catch(err=>{})
        },
        onclick(index){
            console.log(index);
            if(index===4){
                this.$router.push('/highly').catch(err=>{})
            }else if(index===5){
                this.$router.push('/New').catch(err=>{})
            }else{
                this.$router.push('/homepage').catch(err=>{})
            }
        },
        fun3(){
            this.$router.push('/login').catch(err=>{})
        },
        fun4(index){
            this.$router.push({
                path:'/detail1',
                query:{
                    id:index
                }
            })
        }
  },
//   mounted(){
//         this.$http({
//             url:"http://localhost:3000/navigation5",
//             method:"get",
//         }).then(res=>{
//             res.data[0].data.swipe.forEach(element => {
//                 // swipe
//                 this.img.push(element)
//             })
//         }
mounted(){
    this.$http({
        url:"http://localhost:3000/swipe",
        method:"get",
    }).then(res=>{
        // console.log(res);
        res.data.forEach(element => {
            this.images.push(element)
        });
    })
    this.$http({
        url:"http://localhost:3000/navigation",
        method:"get",
    }).then(res=>{
        this.text=(res.data[0].data.hxtext)
        // console.log(res.data[0].data.hxtext);
        res.data.forEach(element => {
            // console.log(element);
            // this.images.push(element)
           this.myimg =element.data.myimg;
        });
    })
}
}
</script>

<style scoped>
    .flex{
        display: flex;
        position: fixed;
        top: 0;
        z-index: 1;
      
    }
    .van-icon-comment-o:before{
        margin-left: 40px;
    }
    .van-search{
        margin-left: 20px;
    }
    .shop{
        width: 32px;
        text-align: center;
        padding:5px 5px 0px 5px  ;
        color: white;
        font-size: 14px;

        
    }
    .van-icon{
        text-align: center;
        padding-top: 10px;
        color: white;
    }

    .van-swipe-item img{
        width: 100%;
        height: 100%;
    }
 
</style>